<template>
	<view class="uiwu">
		<view class="uiwu-goods uiwu-flex-align">
			<view class="image">
				<image :src="items.image" mode="aspectFill"></image>
				<text>共1件商品</text>
			</view>
			<view class="info">
				<view class="title">物流公司：{{ items.express_name || items.grab_prize_order.express_name }}</view>
				<view class="tips uiwu-flex-align">快递单号：{{ items.express || items.grab_prize_order.express }} <text
						@tap="uiwu.copy(items.express || items.grab_prize_order.express)">复制</text></view>
			</view>
		</view>
		<view class="uiwu-list">
			<view class="item">
				<image src="/static/liucheng3.png" mode="widthFix"></image>
				<view class="in uiwu-flex-column">
					<text class="title">{{ items.real_name }} {{ items.user_phone }}</text>
					<view class="tips">{{ items.user_address }}</view>
				</view>
			</view>
			<view class="item" v-for="(item, index) in items.logistics" :key="index">
				<image src="/static/liucheng2.png" mode="widthFix"></image>
				<view class="in uiwu-flex-column">
					<!-- <text class="title">已发货</text> -->
					<view class="tips">{{ item.AcceptStation }}</view>
					<view class="time">{{ item.AcceptTime }}</view>
				</view>
			</view>
			<view class="item">
				<image src="/static/liucheng1.png" mode="widthFix"></image>
				<view class="in uiwu-flex-column">
					<text class="title">已下单</text>
					<view class="tips">订单提交成功</view>
					<view class="time">{{ uiwu.formatTimestamp(items.add_time * 1000) }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { integralOrderDetail, uiwu } from '@/api/interface/interface';
import { prizeinfo } from '@/api/interface/prize';
import { onLoad } from '@dcloudio/uni-app';
import { ref } from "vue";
const items = ref({})
const getintegralOrderDetail = async (id: string | number): Promise<any> => {
	const { data } = await integralOrderDetail(id);
	items.value = data
}
const getPrizeinfo = async (id: string | number): Promise<any> => {
	const { data } = await prizeinfo(id);
	items.value = data
}
onLoad(({ id, type }) => {
	if (type) {
		getPrizeinfo(id)
	} else {
		getintegralOrderDetail(id)
	}
})
</script>

<style lang="scss">
page {
	background-color: #f6f6f6;
}

.uiwu {
	padding: 20rpx;
}

.uiwu-goods {
	width: 100%;
	height: 208rpx;
	background: #FFFFFF;
	border-radius: 16rpx;

	.image {
		width: 160rpx;
		height: 160rpx;
		border-radius: 16rpx;
		position: relative;

		image {
			width: 100%;
			height: 100%;
			border-radius: 16rpx;
		}

		text {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			width: 100%;
			height: 42rpx;
			border-radius: 21rpx;
			background: rgba(0, 0, 0, .5);
			font-size: 24rpx;
			font-weight: 500;
			color: #FFFFFF;
			text-align: center;
			line-height: 42rpx;
		}
	}

	.info {
		flex: 1;
		margin-left: 24rpx;

		.title {
			font-size: 28rpx;
			font-weight: bold;
			color: #231815;
		}

		.tips {
			font-size: 24rpx;
			font-weight: 500;
			color: #666666;
			margin-top: 24rpx;

			text {
				font-size: 24rpx;
				font-weight: 500;
				margin-left: 52rpx;
				color: #EF821E;
			}
		}
	}
}

.uiwu-list {
	background-color: #fff;
	margin-top: 20rpx;
	padding: 15rpx 24rpx;
	border-radius: 16rpx;

	.item {
		display: flex;
		padding: 15rpx 0;

		image {
			width: 48rpx;
			margin-right: 20rpx;
		}

		.in {
			flex: 1;

			.title {
				font-size: 28rpx;
				font-weight: bold;
				color: #231815;
			}

			.tips {
				margin-top: 6rpx;
				font-size: 28rpx;
				font-weight: 500;
				color: #666666;
			}

			.time {
				font-size: 24rpx;
				font-weight: 300;
				color: #666666;
			}
		}
	}
}
</style>
